<template lang="html">
  <div class="story">
    <header-item skin='black' active='2'></header-item>

    <div class="body">
      <h1>创作历程</h1>
      <div class="content">
        <div class="item">
          <el-row>
            <el-col :span="12" class='leftItem'>
              <img src="../assets/images/story/btx1.png">
            </el-col>
            <el-col :span="12" class='rightItem' style='line-height:3;padding-top:40px;'>
              13名资深画师
              <img src="../assets/images/story/right.png" class='border'>
            </el-col>
          </el-row>
        </div>

        <div class="item">
          <el-row>
            <el-col :span="12" class='leftItem' style="text-align:center;padding-top:60px;line-height:1.5;">
              参阅63部经典二次元动漫
              <img src="../assets/images/story/left.png" class='border'>
            </el-col>
            <el-col :span="12" class='rightItem'>
              <img src="../assets/images/story/btx2.png">
            </el-col>
          </el-row>
        </div>

        <div class="item">
          <el-row>
            <el-col :span="12" class='leftItem'>
              <img src="../assets/images/story/btx3.png">
            </el-col>
            <el-col :span="12" class='rightItem' style='line-height:1.5;padding-top:40px;'>
              绘制133张手绘原稿
              <img src="../assets/images/story/right.png" class='border'>
            </el-col>
          </el-row>
        </div>

        <div class="item">
          <el-row>
            <el-col :span="12" class='leftItem' style="text-align:center;padding-top:60px;line-height:1.5;">
              通过23张应用场景美术设定
              <img src="../assets/images/story/left.png" class='border'>
            </el-col>
            <el-col :span="12" class='rightItem'>
              <img src="../assets/images/story/btx4.png">
            </el-col>
          </el-row>
        </div>

        <div class="item">
          <el-row>
            <el-col :span="12" class='leftItem'>
              <img src="../assets/images/story/btx5.png">
            </el-col>
            <el-col :span="12" class='rightItem' style='line-height:1.5;padding-top:40px;'>
              83次细节修订最终成型
              <img src="../assets/images/story/right.png" class='border'>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>

    <footer-item></footer-item>
  </div>
</template>
<script>
import HeaderItem from '../components/Header';
import FooterItem from '../components/Footer';
export default {

  data () {
    return {
    }
  },
  methods:{
  	tourl(url){
      tools.router.push({path:url})
    }
  },
  mounted(){
    var _this = this;

  },
   components:{
    HeaderItem,FooterItem
  }
}
</script>

<style scoped lang='scss'>
.story{
  width: 100%;
  // font-family: "Helvetica Neue", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif, "微软雅黑" !important;
  .body{
    margin-top: 100px !important;
    border-top: 1px solid #D5D5D5;

    h1{
      margin-top: 74px;
      margin-bottom: 55px;
      text-align: center;
      font-weight: normal;
      color: #fff;
    }

    .content{
      width: 600px;
      color: #030303;
      padding-bottom: 60px;
      margin: 0 auto;

      .item{
        font-size:20px;
        margin-bottom: 80px;
        .leftItem{
          height: 150px;
          position: relative;
          color: #fff;
          .border{
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
          }
        }
        .rightItem{
          height: 150px;
          position: relative;
          color: #fff;
          padding-left: 80px;
          .border{
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: -1;
          }
        }
      }
    }

  }
}
</style>
